<template>
    <el-dialog v-model="dialogModel" title="综合素质发起" width="50%">
        <template #header="{ close, titleId, titleClass }">
            <div class="my-header">
                <h6 :id="titleId" :class="titleClass">综合素质评价发起</h6>
            </div>
        </template>
        <el-descriptions title="" border :column="2">
            <el-descriptions-item label="姓名">{{ props.detail.user.realName }}</el-descriptions-item>
            <el-descriptions-item label="岗位">{{ props.detail.user.postName }}</el-descriptions-item>
            <el-descriptions-item label="部门">{{ props.detail.user.deptName }}</el-descriptions-item>
            <el-descriptions-item label="密级">{{ props.detail.user.securityName }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions title="综合素质评估项" border style="margin-top: 15px;">
            <el-descriptions-item>
                <el-table :data="tableData">
                    <el-table-column type="index" width="80" label="序号" />
                    <el-table-column prop="name" label="综合素质评价项" />
                    <el-table-column label="满足" width="160">
                        <template #default="{ row }">
                            <el-icon v-if="row.satisfy"><Select /></el-icon>
                        </template>
                    </el-table-column>
                    <el-table-column label="不满足" width="160">
                        <template #default="{ row }">
                            <el-icon v-if="!row.satisfy"><Select /></el-icon>
                        </template>
                    </el-table-column>
                </el-table>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="总体评价" border style="margin-top: 15px;">
            <el-descriptions-item>
                <el-input v-model="textarea" style="width: 100%" :rows="4" type="textarea" placeholder="" />
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="评价结论" border style="margin-top: 15px;" :column="1">
            <el-descriptions-item>
                <el-radio-group v-model="subject_result">
                    <el-radio :value="3">优秀</el-radio>
                    <el-radio :value="6">称职</el-radio>
                    <el-radio :value="9">基本称职</el-radio>
                    <el-radio :value="10">不本称职</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="部门评价人">
                <el-select v-model="deptuser" filterable placeholder="请选择评价人" style="width: 240px">
                    <el-option v-for="item in options" :key="item.id" :label="item.realName" :value="item.id" />
                </el-select>
            </el-descriptions-item>
        </el-descriptions>
        <el-descriptions title="" border style="margin-top: 15px;">
        </el-descriptions>
        <div style="display: flex; justify-content: center; align-items: center; width: 100%;">
            <el-button type="primary" @click="handlerSave">发起</el-button>
            <el-button type="primary" @click="handlerCancal" style="margin-left: 50px;">取消</el-button>
        </div>

        <!-- <el-descriptions title="评价结论" border>
            <el-descriptions-item>
                <el-radio-group v-model="radio">
                    <el-radio :value="3">Option A</el-radio>
                    <el-radio :value="6">Option B</el-radio>
                    <el-radio :value="9">Option C</el-radio>
                </el-radio-group>
            </el-descriptions-item>
            <el-descriptions-item label="工号">18100000000</el-descriptions-item>
            <el-descriptions-item label="部门">Suzhou</el-descriptions-item>
            <el-descriptions-item label="密级">Suzhou</el-descriptions-item>
            <el-descriptions-item label="密级">
                <el-tag size="small">School</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="Address">
                No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
            </el-descriptions-item>
        </el-descriptions> -->
    </el-dialog>
</template>

<script setup>
import { reactive, ref, watch } from 'vue';
import { ElNotification, ElDescriptions, ElDescriptionsItem, } from 'element-plus';
import { getList } from '@/api/system/user'
import { getAssessItem, subjectiveResultStart } from '@/api/position/positionAssessResultSubjective';

const props = defineProps({
    detail: {},
    type: '',
});
const dialogModel = ref(false);
const textarea = '';
const subject_result = ref(0)
const deptuser = ref(null);
const options = ref([]);

watch(() => props.detail.id, () => {
    if (!props.detail?.id) {
        return
    }
    buildAssessItemTable(props.detail?.id);
    getUserInfo();

}, {
    immediate: true
});
defineExpose({
    open() {
        dialogModel.value = true;
    }
});
async function getUserInfo() {
    let res = await getList(1, 100);
    options.value = res.data.data.records;
}

async function buildAssessItemTable(id) {
    let res = await getAssessItem(id)
    tableData.value = res.data.data
}

const tableData = ref([])


async function handlerSave() {
    if (!deptuser.value) {
        ElNotification({
            title: '提示',
            type: 'warning',
            message: h('i', { style: 'color: teal' }, '请选择一个部门评价人'),
        })
    } else {
        console.log(props.type, props.detail.id, deptuser.value);
        let res = await subjectiveResultStart(props.type, props.detail.id, deptuser.value)
        console.log('231', res.data.success);
        if (res.data.success) {
            ElNotification({
                title: '提示',
                type: 'warning',
                message: h('i', { style: 'color: teal' }, '操作成功'),
            })
            dialogModel.value = false;
        }else{
            ElNotification({
                title: '提示',
                type: 'warning',
                message: h('i', { style: 'color: teal' }, '操作成功'),
            })
        }
    }

}
function handlerCancal(params) {
    dialogModel.value = false;
}
</script>
<style scoped>
.my-header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 38px;
}

.info-box {
    font-size: 14px;
    margin-bottom: 4px;
}

.mb-4 {
    margin-bottom: 16px;
}

.mt-4 {
    margin-top: 16px;
}
</style>